<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        *{
padding: 0;
margin: 0;
box-sizing: border-box;
        }
        .container{
            display: grid;
            grid-template-columns: 150px 300px 100px ;
            grid-template-rows: 100px 200px 100px; 
            grid-column-gap: 10px;
            grid-row-gap: 10px;
            background-color: rgb(207, 204, 204);
            width: 570px;
            height: 420px;
            margin: 0 auto;
        }
        .box1{
            background-color: rgb(220, 129, 159);
            grid-row-start:1;
            grid-row-end: 3; 
        }
        .box2{
            background-color: rgb(229, 230, 153);
            grid-row-end: 2;
        }
        .box3{
            background-color: rgb(223, 167, 221);
        }
        .box4{
            background-color: rgb(198, 185, 243);
        }
        .box5{
            background-color: rgb(133, 148, 236);
            grid-row-end: 4;
        }
        .box6{
            background-color: rgb(134, 188, 200);
        }
        .box7{
            background-color: rgb(135, 206, 177);
        }
        .box8{
            background-color: rgb(200, 238, 186);
        }
       
    </style>
    <title>CSS Grid #2-Two column layout</title>
</head>
<body>
    <br>
    <div class="center">
         <div class="container">
        
           <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
        <div class="box box4" align="center">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Itaque 
            nemo ad at maxime a amet repellat similique quos nisi cum sapiente, fugiat quo, 
            eveniet aliquid possimus odio hic impedit repellendus!

        </div>
        <div class="box box5">5</div>
        <div class="box box6">6</div>
        <div class="box box7">7</div>
        <div class="box box8">8</div>
        
        
        
    </div>
    </div>
   
</body>
</html>

<!--
grid-gap
firefox debug tool
max-content/min-content
media query
-->